<template>
  <div class="MiUpload-box">
    <el-upload
        :action="uploadUrl"
        :before-upload="beforeAvatarUpload"

        :data="{

            }"
        :limit="1"
        :name="uploadFileName"
        :on-success="handleAvatarSuccess"
        :show-file-list="false"
        class="upload-demo"

        drag
        multiple
        @on-change="uploadChange"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "MiUpload",
  props: {
    url: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      uploadFileName: "file",
      uploadUrl: this.$props.url,
      imageUrl: "",
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log('uploadok', file)
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    uploadChange(file, fileList) {
      console.log(file)
      console.log(fileList)
    }, watch: {
      url(newV) {
        this.uploadUrl = newV
      }
    },
    mounted() {
      // 抛出上传文件权

      this.$emit('handleSubmit', {
        uploadObject: this.$refs.upload,
        submit: this.$refs.upload.submit
      })
    }
  }
}
</script>

<style scoped>
.MiUpload-box {

}
</style>